<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#myCan {
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<canvas id="myCan" width="1200px" height="400px"></canvas>
		<script type="text/javascript">
			var oC = document.getElementById('myCan');
			var ctx = oC.getContext('2d');
			var text = ['最高气温','最低气温','天气状况'];
			$.ajax({
				url:"http://www.tianqiapi.com/api?version=v9&appid=23035354&appsecret=8YvlPNrz",
				type:"POST",
				dataType:"JSON",
				success:function(res){
					console.log(res.data);
					ctx.save();
					// ctx.translate(140,0);
					ctx.font = '14px 微软雅黑';
					ctx.textAlign = 'center';
					$(res.data).each(function(index,item){
						console.log(item);
						ctx.fillText(item.date,(index+1)*140,30);
						ctx.fillText(item.tem+'℃',(index+1)*140,100);
						ctx.fillText(item.tem2+'℃',(index+1)*140,200);
						ctx.fillText(item.wea,(index+1)*140,300);
					});
					ctx.restore();
				}
			});
			// drawLine();
			function drawLine(){
				ctx.translate(10,0);
				for(var i=0;i<7;i++){
					console.log(i+1);
					ctx.beginPath();
					ctx.moveTo((i+1)*100,0);
					ctx.lineTo((i+1)*100,500);
					ctx.stroke();
					ctx.closePath();
				}
				ctx.restore();
			}
			
			// 标题
			createHead();
			function createHead(){
				ctx.save();
				ctx.font = '16px 微软雅黑';
				for(i=0;i<text.length;i++){
					ctx.fillText(text[i],0,(i+1)*100);
				}
				ctx.restore();
			}
		</script>
	</body>
</html>
